<template>
	<div class="section section-base page_7">
		<div class="flex-start font30" style="padding-top: 20px;">
			<count-to :startVal="0" :endVal="Number(detailData.percent)" :duration="3000"></count-to>
			<div>%</div>
		</div>
		<div class="font16" id="inspectDes">
			单位全年一共发布了{{detailData.total}}次巡检任务，
			完成了{{detailData.percent}}%的巡检任务，
			展开了{{detailData.pointCount}}次点位巡查。
		</div>
		<animation-text :text="animationText"></animation-text>
		<div v-if="detailData.total&&animated" :class="{ 'animate__zoomIn':animated }" class="text-c animate__animated" id="page_7_content">
			<div class="page_7_head"><img src="/ilink-app-h5-zd/static/img/ilink_1578018132922.png" class="icon-logo">
				<img :src="detailData.headUrl || '/ilink-app-h5-zd/static/img/ilink_1578026701915.png'" class="icon-head">
			</div>
			<p class="font24">最勤劳的人</p>
			<p class="font18">{{detailData.inspectPersonName}}</p>
			<p class="text-l font14">一年领取了{{detailData.inspectTaskCount}}次巡检任务，开展了{{detailData.inspectPointCount}}次点位巡查。</p>
		</div>
	</div>
</template>

<script>
export default {
	components: {},
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {
					joinTime: {},
				}
			},
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			detailData: {
				total: 0,
				percent: 0,
				pointCount: 0,
			},
			animationText: '',
			animated:false
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.$nextTick(() => {
					this.init()
				})
			}else{
				this.animated=false
			}
		},
	},
	methods: {
		init() {
			this.animationText = '日积月累、持之以恒的完成日常巡检换来的是防微杜渐、灭隐患于初始。'
			this.detailData = this.reportData.inspect
			setTimeout(()=>{
				this.animated=true
			},2200)
		},
	},
	mounted() {},
}
</script>